import React, { useEffect, useState } from 'react'
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { GetAllUser } from '@/apis/user';
import AddUser from '../../components/addUser';
import Style from '@/styles/user.less'


type Props = {}
// 表格约束
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
    description: string;
}
// 表格格式
const columns: ColumnsType<DataType> = [
    { title: 'ID', dataIndex: '_id' },
    { title: '头像', dataIndex: 'avatar', render: (avatar) => <img src={avatar} alt="" width='36px' /> },
    { title: '姓名', dataIndex: 'nickname' },
    { title: '付费会员', dataIndex: 'isMember' },
    { title: '用户等级', dataIndex: 'level' },
    { title: '分组', dataIndex: 'group_id' },
    { title: '手机号', dataIndex: 'phone' },
    { title: '用户类型', dataIndex: 'is_promoter' },
    { title: '余额', dataIndex: 'address' },
    // { title: '操作', dataIndex: '', render: () => <a>删除</a>, },
];

const UserAll = (props: Props) => {
    const [data, setData] = useState([])
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    useEffect(() => { getAll() }, [])

    // 初始数据
    const getAll = async () => {
        const res: any = await GetAllUser({})
        console.log(res);
        setData(res.data)
    }
    // 选择
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    return (
        <>
            <AddUser shuaxin={getAll}/>
            <Table
                columns={columns} dataSource={data} rowKey='_id' rowSelection={rowSelection}
                expandable={{
                    expandedRowRender: (record:any) => (
                        <div className={Style.Rebox}>
                            <div>真实姓名：{record.real_name}</div>
                            <div>身份证号：{record.id_card}</div>
                            <div>地址：{record.address}</div>
                            <div>生日：{record.birthday}</div>
                            <div>密码：{record.password}</div>
                            <div>备注：{record.remarks}</div>
                        </div>
                    ),
                }} />
        </>
    )
}

export default UserAll